<!doctype html>
<style>p::first-letter { font-size: 200%; color: red; }</style>
<p id="start">  [!(5)#]9abcdefghi</p>
<div id="start2">ABC</div>
<p>(a) bc</p>
<div id="end2">DEF</div>
<p id="end">[!(3)#]789abcd</p>
<script>
const selection = window.getSelection();
const start = document.getElementById('start2');
const end = document.getElementById('end');
// Select "A^BC to (3)|"
selection.collapse(start.firstChild, 1);
selection.extend(end.firstChild, 5);
</script>
